import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { environment } from '../../../../environments/environment';
declare const echarts: any;

@Component({
    selector: 'app-appserver',
    templateUrl: './appserver.component.html',
    styleUrls: ['./appserver.component.less']
})
export class appserverComponent implements OnInit {
    cpuTotal: any;
    cpuBaseData = [];
    cpuIndex = [];
    cpuRes = [];
    jvmTotal: any;
    jvmTitle: any;
    selectedValue: any = '';

    constructor(private http: _HttpClient,) { }

    ngOnInit() {
        this.cpuchart();
        this.jvmchart();
        this.memorychart();
        this.oraclechart();
    }

    cpuchart() {
        this.cpuData().subscribe((res: any) => {
            this.cpuRes = res;
            for (let i = 0; i < this.cpuRes.length; i++) {
                this.cpuIndex.push({
                    'name': '第' + Number(i + 1) + '个CPU',
                    'value': i
                });
                this.selectedValue = this.cpuIndex[0].value;
            }
            this.cpuselect(this.cpuRes, 0);
        });
    }

    // cpu监控
    cpuData() {
        const url = environment.apiBase + '/csmis/system/monitor/cpu.jwt';
        return this.http.get(url);
    }

    // 虚拟机监控
    jvmData() {
        const url = environment.apiBase + '/csmis/system/monitor/jvm.jwt';
        return this.http.get(url);
    }

    // 内存监控
    memoryData() {
        const url = environment.apiBase + '/csmis/system/monitor/memory.jwt';
        return this.http.get(url);
    }

    // 数据库监控
    oracleData() {
        const url = environment.apiBase + '/csmis/system/monitor/getOracleInfo.jwt';
        return this.http.get(url);
    }

    provinceChange(index: any) {
        this.cpuselect(this.cpuRes, index);
    }

    cpuselect(res: any, index: any) {
        const nameData = ['总使用率', '当前空闲率', '当前错误率', '系统使用率', '用户使用率', '当前等待率'];
        this.cpuBaseData = [];
        this.cpuBaseData.push({ 'name': nameData[0], 'value': this.format(res[index].combined) });
        this.cpuBaseData.push({ 'name': nameData[1], 'value': this.format(res[index].idle) });
        this.cpuBaseData.push({ 'name': nameData[2], 'value': this.format(res[index].nice) });
        this.cpuBaseData.push({ 'name': nameData[3], 'value': this.format(res[index].sys) });
        this.cpuBaseData.push({ 'name': nameData[4], 'value': this.format(res[index].user) });
        this.cpuBaseData.push({ 'name': nameData[5], 'value': this.format(res[index].wait) });

        echarts.init(document.getElementById('cpuchart')).setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{b} {d}%'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 12,
                top: 110,
                data: nameData,
                selected: this.cpuBaseData
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    data: this.cpuBaseData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }, true);
    }

    jvmchart() {
        this.jvmData().subscribe((res: any) => {
            this.jvmTotal = this.format(res[0].total) + 'MB';
            this.jvmTitle = this.format(res[0].percent) + '%';

            echarts.init(document.getElementById('jvmchart')).setOption({
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        data: [
                            {
                                value: this.format(res[0].free),
                                name: '未使用' + this.format(res[0].free) + 'MB',
                                itemStyle: {
                                    normal: {
                                        color: '#d9edff',
                                        label: {
                                            textStyle: {
                                                color: '#3398DB'
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                value: this.format(res[0].used),
                                name: '已使用' + this.format(res[0].used) + 'MB',
                                itemStyle: {
                                    normal: {
                                        color: '#3398DB',
                                        label: {
                                            textStyle: {
                                                color: '#3398DB'
                                            }
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }, true);
        });
    }

    memorychart() {
        this.memoryData().subscribe((res: any) => {
            const percent = (this.format(res[0].used / res[0].total) * 100).toFixed(2);
            echarts.init(document.getElementById('memoryPercent')).setOption({
                grid: {
                    top: '20%'
                },
                series: [
                    {
                        type: 'gauge',
                        detail: { formatter: '{value}%' },
                        data: [{ value: percent, name: '内存使用率' }]
                    }
                ]
            }, true);
        });
    }

    oraclechart() {
        this.oracleData().subscribe((res: any) => {
            const name = [];
            const value = [];
            for (const item of res) {
                if (item.tablespace.indexOf('CSMIS') != '-1') {
                    name.push(item.tablespace);
                    value.push(Number(item.rate.replace('%', '')));
                }
            }
            echarts.init(document.getElementById('oraclechart')).setOption({
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b} {a} {c}%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: name,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '已使用',
                        type: 'bar',
                        barWidth: '60%',
                        data: value
                    }
                ]
            }, true);
        });
    }

    format(data) {
        let f = parseFloat(data);
        if (isNaN(f)) {
            return;
        }
        f = Math.round(data * 100) / 100;
        return f;
    }

}
